import Image from 'next/image';
import React from 'react';

type Props = {
    type: "start" | "end",
    messageTime: string,
    imgUrl?: string,
    topMessage?: string,
    messageBody: string;
    buttonMessage?: string;
};

const ChatMessageBubble: React.FC<Props> = ({ type, imgUrl = "https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp", topMessage, messageBody, buttonMessage, messageTime = "1970/01/01 00:00:00" }) => {

    const isStart = () => {
        if (type === "start") {
            return "chat chat-start";
        } else {
            return "chat chat-end";
        }
    };

    return (
        <div className={isStart()}>
            {/* 消息头像 */}
            <div className='chat-image avatar'>
                <div className='rounded-full w-10'>
                    <Image alt='头像' width={300} height={300} src={imgUrl} />
                </div>
            </div>
            {/* 消息头 */}
            <div className='chat-header'>
                {/* 气泡顶部消息 */}
                {topMessage}
                {/* 气泡顶部消息发送时间 */}
                <time className="opacity-50">{messageTime}</time>
            </div>
            {/* 消息主体 */}
            <div className="chat-bubble">{messageBody}</div>
            {/* 气泡底部消息 */}
            <div className="opacity-50 chat-footer">{buttonMessage}</div>


        </div>
    );
};

export default ChatMessageBubble;
